<template>
<div :style="{ fontSize:fontSize + 'px'}" class="videoBox">
  <div class="videoMain">
      <video 
        style="width= 100%; height=100%; object-fit: fill"
        preload="metadata" 
        :src="src"
        :poster="poster"
        @click="interval"
        ref="video">
      </video>
      <div v-if="type === 'error'" class="errMask">
        error
      </div>
      <mu-circular-progress class="loading" v-if="type === 'loading'" color='#eee' :size="40"/>
      <mu-icon class="loading" @click="$emit('switchPlay')" color="white" v-if="!isPlay" value="play_circle_outline" :size="40" />
      <transition name="enter">
      <div class="controls"
           v-show="showControls">
        <div @click="$emit('switchPlay')">
          <mu-icon v-if="!isPlay" value="play_arrow"/>
          <i v-if="isPlay" value="pause"/>
        </div>
        <div>
          <div class="timeline">{{current | vTimeconvert}}/{{duration | vTimeconvert}}</div>
          <div class="dragline">
            <mu-slider
              @change="changeValue"
              v-model="playRate" />
          </div>
        </div>
        <div @click="fullScreen">
          <mu-icon value="crop_free"/>
        </div>
      </div>
      </transition>
  </div>
  <div class="bar">
    <div class="poster">
      <div class="avatar">
      </div>
      <div class="writer">
        宽宽GO
      </div>
    </div>
      <mu-icon-menu icon="more_vert">
      </mu-icon-menu>
  </div>
</div>
</template>

<script>
  import { Tab, TabItem } from 'vux'

  export default {
    components: {
      Tab,
      TabItem
    },
    props: {
      src: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      poster: {
        type: String,
        default: ''
      },
      isPlay: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        fontSize: 10,
        showControls: false,
        currentTimer: 0,
        timer: null,
        duration: 0,
        current: '0',
        playRate: 0,
        type: 'player'
      }
    },
    watch: {
      isPlay: function (val) {
        val ? this.$refs.video.play() : this.$refs.video.pause()
      }
    },
    methods: {
      fullScreen () {
        this.$refs.video.webkitRequestFullScreen()
      },
      interval () {
        if (this.currentTimer === 0) {
          this.currentTimer = 1
          this.timer = setTimeout(() => {
            this.showControls = !this.showControls
            this.currentTimer = 0
          }, 350)
        } else {
          clearInterval(this.timer)
          this.$emit('switchPlay')
          this.currentTimer = 0
        }
      },
      changeValue (e) {
        this.$refs.video.currentTime = this.duration * (e / 100)
      },
    },
    created () {
      this.fontSize = this.fontSize * document.body.offsetWidth / 320
    },
    mounted () {
      this.$refs.video.addEventListener('loadedmetadata', () => {
        this.duration = Math.floor(this.$refs.video.duration)
      })
      this.$refs.video.addEventListener('timeupdate', () => {
        this.current = Math.floor(this.$refs.video.currentTime)
        this.playRate = Math.floor(this.current / this.duration * 100)
      })
      this.$refs.video.addEventListener('ended', () => {
        this.$emit('switchPlay')
        this.playRate = 0
        this.current = 0
      })
      this.$refs.video.addEventListener('loadstart', () => {
        this.type = 'loading'
      })
      this.$refs.video.addEventListener('canplay', () => {
        this.type = 'player'
      })
      this.$refs.video.addEventListener('error', () => {
        this.type = 'error'
      })
      document.getElementsByClassName('mu-slider-fill')[0].style="background: rgb(77, 99, 235);width: 0"
      document.getElementsByClassName('mu-slider-thumb')[0].style="background: rgb(77, 99, 235);left: 0;border:2px solid rgb(77, 99, 235)"
    }
  }
</script>


<style lang="less" scoped>
.tabAfter {
  border-top: 1px solid #E9E9E9;
  .tabOne {
    position: relative;
  }
  .tabOne:after {
    content: '';
    height: 14px;
    width: 1px;
    background: #eee;
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
  }
}

.dragline {
  margin-left: 20px;
}
.loading {
  position: absolute;
  top: 75px;
  left: 50%;
  margin-left: -25px;
}
.mu-slider {
  margin-bottom: 0 !important;
}

.errMask {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 99998;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  color: white;
}

.videoBox {
  margin-bottom: 2em;
  .videoMain {
    height: 16em;
    position: relative;
    video {
      height: 16em;
      width: 100%;
    }
    .controls {
      height: 3em;
      width: 100%;
      background: linear-gradient(to top, rgba(66, 66, 66, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 4%;
      div {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }
      div:nth-child(2) {
        flex: 4;
      }
    }
  }
  .bar {
    height: 4em;
    padding: 0 1em;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .poster {
      height: 2.4em;
      width: 7.8em;
      background: #E9E9E9;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .avatar {
        border-radius: 50%;
        height: 1.5em;
        width: 1.5em;
        position: absolute;
        left: 1.5em;
        margin-left: 0em;
        background: white;
      }
      .writer {
        padding-left: 1em;
      }
    }
  }
}

</style>